<!DOCTYPE html>
<html lang="en">
<!--
1.	全选：当点击“全选”是所有的复选框被选中；（效果见图12）
2.	不选：当点击“全不选”时，所有的复选框全部不被选中；（效果见图13）
3.	反选：当点击“反选”时，选择复选框的相反的状态。（效果见图14）
-->
<!--
1.	为按钮“全选”、“不选”和“反选”绑定点击事件；
2.	编写方法，实现效果
3.	提示：将checkbox的checked属性设置为true则选中，设置为false则取消选中。
-->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: auto;
            width: 500px;
            border-collapse: collapse;
        }
    </style>
    <script>
        let checkboxs = document.getElementsByTagName("input");
        function checkAll() {

            for(let i =0;i<checkboxs.length;i++){
                checkboxs[i].checked=true;
            }
        }
        function checkNo() {
            for(let i =0;i<checkboxs.length;i++){
                checkboxs[i].checked=false;
            }
        }
        function checkOppsite() {
            for(i=0;i<checkboxs.length;i++){
                if(checkboxs[i].checked==true){
                    checkboxs[i].checked=false;
                }else{
                    checkboxs[i].checked=true;
                }
            }
        }
    </script>
</head>
<body>
<div>
    <table border="1px" cellspacing="0" cellpadding="6">
        <!--    第一行-->
        <tr>
            <th>
                <input type="button" value="全选" onclick="checkAll()">&nbsp;
                <input type="button" value="不选" onclick="checkNo()">&nbsp;
                <input type="button" value="反选" onclick="checkOppsite()">
            </th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
        </tr>
        <!--    第二行-->
        <tr>
            <td align="center">
                <input type="checkbox">
            </td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
        </tr>
        <!--    第三行-->
        <tr>
            <td align="center">
                <input type="checkbox">
            </td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
        </tr>
        <!--    第四行-->
        <tr>
            <td align="center">
                <input type="checkbox">
            </td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
        </tr>
        <!--    第五行-->
        <tr>
            <td align="center">
                <input type="checkbox">
            </td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
        </tr>
    </table>
</div>
</body>
</html>